{extend name="public/common"}
{block name="style"}
<link rel="stylesheet" href="/home/css/user/release.css">
<title>我的发布</title>
<style>
    .default img {
        width: 16vw;
        position: absolute;
        left: 50%;
    }
</style>
{/block}
{block name="body"}
<div  class="scroll" style="position:absolute; overflow:scroll; -webkit-overflow-scrolling: touch; top:0; left:0; bottom:0; right:0" >
    <div class="release">
    {empty name="list"}
    <div class="default"><img src="/home/images/common/nomessage.png"></div>
    {else/}
    {volist name="list" id="vo"}
    <div class="notices">
        <div class="lists">
            <div class="list clear">
                <div class="fl">
                    <img src="{$vo.header}" alt="用户头像">
                </div>
                <div class="fr">
                    <div class="name limit">{$vo.user}</div>
                    <div class="content">{$vo.content}</div>
                    <div class="imgs">
                        {volist name = "$vo.img" id="pic"}
                        <div class="img">
                            <img src="{$pic}" alt="评论图" data-original="">
                        </div>
                        {/volist}
                    </div>
                    <div class="note clear">
                        <span style="width:80%">{$vo.department}/{$vo.time}发布</span>
                        <span class="good"></span>
                        <span class="goodnum">{$vo.likes}</span>
                        <span class="message"></span>
                    </div>
                    <ul class="comments">
                        {notempty name="$vo.comment"}
                        {volist name ="$vo.comment" id="co"}
                        <li>
                            <span class="name">{$co.nickname}</span>
                            <span class="comment">{$co.content}</span>
                        </li>
                        {/volist}
                        {/notempty}
                    </ul>
                </div>

            </div>
        </div>
    </div>
    {/volist}
   {/empty}
    </div>
    <div class="tip"></div>
    <div class="loading hidden">
        <div class="typing_loader"></div>
    </div>
</div>

{/block}
{block name="script"}
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    $("title").text("我的发布");

    $(function(){
        var len  = $(".notices").length;
        if(len >=12){
            $('.tip').text('上拉加载更多');
            document.getElementsByClassName("scroll")[0].addEventListener('scroll',handleScroll);
        }else{
            document.getElementsByClassName("scroll")[0].removeEventListener("scroll",handleScroll);
            $('.tip').hide();
        }
    });

    var scrollNow = true;
    var handleScroll = function() {
        var tip = $(".tip");
        var loading = $('.loading');
        var len  =  $(".notices").length;
        var el = document.getElementsByClassName("scroll")[0];
        if(el.scrollTop + el.offsetHeight +2 >= el.scrollHeight && scrollNow){
            scrollNow = false;
            tip.show().text('上拉加载更多');
            $.ajax({
                type: 'post',
                url: "{:Url('Person/listMore')}",
                data: {
                    length:len
                },
                beforeSend: function(XMLHttpRequest){
                    tip.hide();
                    loading.toggleClass('hidden');
                },
                success: function (res) {
                    loading.toggleClass('hidden');
                    tip.show();
                    console.log(res)
                    if(res.code == 1){
                        addList(res);
                        if(res.data.length==12){
                            tip.text('上拉加载更多');
                        }else{
                            tip.text('没有更多了');
                            document.getElementsByClassName("scroll")[0].removeEventListener("scroll",handleScroll);
                        }
                    }else{
                        tip.text('没有更多了');
                        document.getElementsByClassName("scroll")[0].removeEventListener("scroll",handleScroll);
                    }
                    scrollNow = true;
                }
            });
        }
    };
    function addList(data){
        console.log(data)
        var html = '';
        var lists = data.data;
        var len = lists.length;
        for(var i = 0; i< len;i++){
            var list = lists[i];
            html +=
                '    <div class="notices">' +
                '<div class="lists">' +
                '<div class="list clear">'+
                '<div class="fl">'+
                '<img src="'+list.header+'" alt="用户头像">'+
                '</div>'+
                '<div class="fr">'+
                '<div class="name limit">'+list.user+'</div>'+
                '<div class="content">'+list.content+'</div>'+
                '<div class="imgs">';
            var imglen = list.img.length;
            for(var j = 0 ;j<imglen ;j++){
                html+=
                    '<div class="img">'+
                    '<img src='+list.img[j]+' alt="评论图" data-original="">'+
                    '</div>';
            }
            html +=
                '</div>'+
                '<div class="note clear">'+
                '<span style="width:80%">'+list.department+'/'+list.time+'发布</span>'
                html+= '<span class="good"></span>'+
                    '<span class="goodnum">'+list.likes+'</span>'+
                    '<span class="message"></span>'+
                    '</div>'+
                    '<ul class="comments">';

            var commentlen = list.comment.length;
            for(var x = 0 ;x <commentlen ;x++){
                html+=
                    '<li>'+
                    '<span class="name">'+list.comment[x].nickname+'：</span>'+
                    '<span class="comment">'+list.comment[x].content+'</span>'+
                    '</li>'
            }
            html+=
                '</ul>'+
                '</div>'+
                '</div>' +
                '</div>' +
                '</div>';
        }
        $('.release').append(html);
        //图片排版、评论框
        layout();
        $(".img img").on('click',function(event) {
            var imgArray = [];
            var curImageSrc = window.location.protocol+'//'+window.location.host+$(this).attr('src');
            var oParent = $(this).parent();
            if (curImageSrc && !oParent.attr('href')) {
                oParent.parent().find("img").each(function(index, el) {
                    var itemSrc = window.location.protocol+'//'+window.location.host+$(this).attr('src');
                    imgArray.push(itemSrc);
                });
                wx.previewImage({
                    current: curImageSrc,
                    urls: imgArray
                });
            }
        });
    }

    var overscroll = function(el) {
        el.addEventListener('touchstart', function() {
            var top = el.scrollTop
                , totalScroll = el.scrollHeight
                , currentScroll = top + el.offsetHeight;
            if(top === 0) {
                el.scrollTop = 1;
            } else if(currentScroll === totalScroll) {
                el.scrollTop = top - 1;
            }
        });
        el.addEventListener('touchmove', function(evt) {
            if(el.offsetHeight < el.scrollHeight)
                evt._isScroller = true;
        });
    }

    overscroll(document.querySelector('.scroll'));
    document.body.addEventListener('touchmove', function(evt) {
        if(!evt._isScroller) {
            evt.preventDefault();
        }
    });

    var layout = function(){
        $('.list' ).each(function(){
            var this_ = $(this);
            var n_img = this_.find('.imgs .img' ).length;
            var n_li = this_.find('.comments li' ).length;
            if(n_img == 4){
                this_.find('.imgs .img' ).eq(1).after('')
            }
            if(n_li == 0){
                this_.find('.comments').addClass('hide');
            }
        })
    };

    //图片排版、评论框
    layout();
    $(".img img").on('click',function(event) {
        var imgArray = [];
        var curImageSrc = window.location.protocol+'//'+window.location.host+$(this).attr('src');
        var oParent = $(this).parent();
        if (curImageSrc && !oParent.attr('href')) {
            oParent.parent().find("img").each(function(index, el) {
                var itemSrc = window.location.protocol+'//'+window.location.host+$(this).attr('src');
                imgArray.push(itemSrc);
            });
            wx.previewImage({
                current: curImageSrc,
                urls: imgArray
            });
        }
    });
</script>
{/block}